import React from "react";
import styled, { css } from "styled-components";
import { getCssFromSvg } from "../../icons/get-css-from-svg";
import { TreeNode } from "rc-tree";
import ReactDOMServer from "react-dom/server";
import PropTypes from "prop-types";
import NoUserSelect from "../../utils/commonStyles";
import Base from "../../themes/base";
import CatalogFolderReactSvg from "PUBLIC_DIR/images/catalog.folder.react.svg";
import CheckboxCheckedReactSvg from "PUBLIC_DIR/images/checkbox.checked.react.svg";
import CheckboxIndeterminateReactSvg from "PUBLIC_DIR/images/checkbox.indeterminate.react.svg";
import CheckboxIcon from "PUBLIC_DIR/images/checkbox.react.svg";
import commonIconsStyles from "../../utils/common-icons-style";

const StyledCheckboxIcon = styled(CheckboxIcon)`
  color: ${(props) => props.theme.checkbox.fillColor};
  ${commonIconsStyles};
`;

StyledCheckboxIcon.defaultProps = { theme: Base };

const StyledCheckboxCheckedIcon = styled(CheckboxCheckedReactSvg)`
  color: ${(props) => props.theme.checkbox.arrowColor};
  ${commonIconsStyles}
`;

StyledCheckboxCheckedIcon.defaultProps = { theme: Base };

const StyledCheckboxIndeterminateIcon = styled(CheckboxIndeterminateReactSvg)`
  color: ${(props) => props.theme.checkbox.indeterminateColor};
  ${commonIconsStyles}
`;

StyledCheckboxIndeterminateIcon.defaultProps = { theme: Base };

var checkboxIcon,
  checkboxСheckedIcon,
  сheckboxDisabledIcon,
  сheckboxHoverIcon,
  сheckboxIndeterminateIcon,
  checkboxCheckedDisabledIcon,
  checkboxCheckedHoverIcon,
  checkboxIndeterminateDisabledIcon,
  checkboxIndeterminateHoverIcon,
  // eslint-disable-next-line no-unused-vars
  treeIcon;

(function () {
  checkboxIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIcon />)
  );
  сheckboxDisabledIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIcon />)
  );
  сheckboxHoverIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIcon />)
  );

  checkboxСheckedIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxCheckedIcon />)
  );
  checkboxCheckedDisabledIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxCheckedIcon
      //isfill={true}
      //isStroke={true}
      //stroke="#ECEEF1"
      />
    )
  );
  checkboxCheckedHoverIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxCheckedIcon
      //isfill={true}
      //isStroke={true}
      //stroke="#A3A9AE"
      />
    )
  );

  сheckboxIndeterminateIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<StyledCheckboxIndeterminateIcon />)
  );
  checkboxIndeterminateDisabledIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxIndeterminateIcon
      //isfill={true}
      //isStroke={true}
      //stroke="#ECEEF1"
      />
    )
  );
  checkboxIndeterminateHoverIcon = getCssFromSvg(
    ReactDOMServer.renderToString(
      <StyledCheckboxIndeterminateIcon
      //isfill={true}
      //isStroke={true}
      //stroke="#A3A9AE"
      />
    )
  );

  treeIcon = getCssFromSvg(
    ReactDOMServer.renderToString(<CatalogFolderReactSvg />)
  );
})();

const TreeNodeMenu = styled(TreeNode)`
  padding: 0;
  margin: 0 0 6px 0;
  list-style: none;
  white-space: nowrap;
  outline: 0;

  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 24px;

  position: relative;

  ${NoUserSelect}

  .rc-tree-node-selected {
    max-width: ${(props) => (props.newItems > 999 ? "71%" : "87%")} !important;
    width: calc(100% - 10px) !important;
  }

  ${(props) =>
    props.dragging &&
    css`
      .draggable {
        background: ${(props) =>
          props.theme.treeNode.dragging.draggable.background};
        border-radius: ${(props) =>
          props.theme.treeNode.dragging.draggable.borderRadius};
        ${(props) =>
          !props.isFullFillSelection &&
          `
            width: min-content !important;
            padding-right: 4px;
            max-width: ${(props) =>
              props.newItems > 999 ? "71%" : "98%"} !important;
          `}

        :hover {
          background: ${(props) =>
            props.theme.treeNode.dragging.draggable.hoverBackgroundColor};
        }
        .rc-tree-title {
          width: ${(props) =>
            props.theme.treeNode.dragging.title.width} !important;
        }
      }
    `}
  .draggable {
    color: ${(props) => props.theme.treeNode.draggable.color};
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: none;
    -webkit-user-drag: none;
  }
  &.drag-over > .draggable {
    background-color: ${(props) =>
      props.theme.treeNode.draggable.dragOverBackgroundColor};
    color: ${(props) => props.theme.treeNode.draggable.dragOverColor};
    border: ${(props) => props.theme.treeNode.draggable.border};
    opacity: 0.8;
  }
  &.drag-over-gap-top > .draggable {
    border-top: ${(props) => props.theme.treeNode.draggable.gapTop.borderTop};
  }
  &.drag-over-gap-bottom > .draggable {
    border-bottom: ${(props) =>
      props.theme.treeNode.draggable.gapBottom.borderBottom};
  }
  &.filter-node > .rc-tree-node-content-wrapper {
    color: ${(props) => props.theme.treeNode.contentWrapper.color} !important;
    font-weight: bold !important;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  .rc-tree-node-content-wrapper {
    // width: ${(props) => (props.disableSwitch ? "90%" : "108%")};
    width: calc(100% - 16px);
    max-width: 87%;
    display: inline-block;
    position: relative;
    z-index: 2;
    /*min-width: ${(props) => (props.disableSwitch ? "160px" : "190px")};*/
    // overflow: hidden;

    cursor: pointer;
    height: 24px;
    text-decoration: none;
    vertical-align: top;

    left: 0;

    svg {
      path {
        fill: ${(props) => props.theme.treeNode.title.color};
      }
    }
  }

  span.rc-tree-switcher,
  span.rc-tree-iconEle {
    line-height: 0;
    margin-right: 5px;
    margin-bottom: 2px;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: top;
    border: 0 none;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;

    svg {
      height: 16px;
      margin-top: 10px;
    }
  }
  span.rc-tree-iconEle {
    display: ${(props) => (props.icon ? "inline-block" : "none")};
  }
  span.rc-tree-switcher {
    background-image: url("");
    z-index: 1;
    position: relative;
  }
  span.rc-tree-iconEle {
    margin: 3px 7px 3px 12px;
    ${(props) => props.disableSwitch && "margin-left: 0;"}
    ${(props) => props.disableSwitch && "margin-right: 10px;"}
        height: 17px;
    width: 17px;
  }
  span.rc-tree-switcher {
    margin: 0px 4px;
    vertical-align: 1px;
    height: 24px;
    width: 8px;
    z-index: 2;
    position: relative;
  }
  span.rc-tree-switcher.rc-tree-icon__customize,
  span.rc-tree-checkbox.rc-tree-icon__customize,
  span.rc-tree-iconEle.rc-tree-icon__customize {
    background-image: none;
  }
  span.rc-tree-icon_loading {
    margin-right: 2px;
    vertical-align: top;
    background: url("")
      no-repeat scroll 0 0 transparent;
  }
  span.rc-tree-switcher.rc-tree-switcher-noop {
    cursor: auto;
  }
  span.rc-tree-switcher.rc-tree-switcher_open {
    background-position: -93px -56px;
  }
  span.rc-tree-switcher.rc-tree-switcher_close {
    background-position: -75px -56px;
  }
  span.rc-tree-checkbox {
    line-height: 16px;
    margin-right: 5px;
    margin-bottom: 2px;
    display: inline-block;
    vertical-align: middle;
    border: 0 none;
    cursor: pointer;
    outline: none;
    width: 16px;
    height: 16px;
    margin: 0 3px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,${checkboxIcon}");
  }

  span.rc-tree-checkbox:hover {
    background-image: url("data:image/svg+xml,${сheckboxHoverIcon}");
  }
  span.rc-tree-checkbox.rc-tree-checkbox-checked:hover {
    background-image: url("data:image/svg+xml,${checkboxCheckedHoverIcon}");
  }
  span.rc-tree-checkbox-indeterminate:hover {
    background-image: url("data:image/svg+xml,${checkboxIndeterminateHoverIcon}");
  }
  span.rc-tree-checkbox-checked {
    background-image: url("data:image/svg+xml,${checkboxСheckedIcon}");
  }
  span.rc-tree-checkbox-indeterminate {
    background-image: url("data:image/svg+xml,${сheckboxIndeterminateIcon}");
  }
  span.rc-tree-checkbox-disabled,
  span.rc-tree-checkbox-disabled:hover {
    background-image: url("data:image/svg+xml,${сheckboxDisabledIcon}");
  }
  span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled {
    background-image: url("data:image/svg+xml,${checkboxCheckedDisabledIcon}");
  }
  span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled {
    background-image: url("data:image/svg+xml,${checkboxIndeterminateDisabledIcon}");
  }
  span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled::after {
    content: " ";
    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    left: 3px;
    top: 5px;
    width: 5px;
    height: 0;
    border: ${(props) => props.theme.treeNode.checkbox.border};
    border-top: ${(props) => props.theme.treeNode.checkbox.borderTop};
    border-left: ${(props) => props.theme.treeNode.checkbox.borderLeft};
  }
  span.rc-tree-title {
    display: inline-block;
    width: ${(props) =>
      !props.disableSwitch
        ? props.icon
          ? props.newItems > 999
            ? "calc(100% - 104px)"
            : "calc(100% - 16px)"
          : "calc(100% - 20px)"
        : "100%"};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: ${(props) => props.theme.treeNode.title.color};
    padding-left: ${(props) =>
      props.icon || props.disableSwitch ? "0" : "20px"};
    margin-top: 2px;
  }
  span.rc-tree-title:first-child {
    max-width: 100%;
  }

  .rc-tree-node-selected {
    //background: ${(props) => props.theme.treeNode.selected.background};
    mix-blend-mode: normal;
    border-radius: ${(props) => props.theme.treeNode.selected.borderRadius};
    z-index: 0;
    ${(props) =>
      props.disableSwitch &&
      css`
        min-width: 0;
        width: auto;
      `}
    :hover {
      background: ${(props) =>
        props.theme.treeNode.selected.hoverBackgroundColor};
    }
    overflow: visible;
    z-index: 2;
    position: relative;
    padding-top: 4px;
  }

  .newItem {
    position: absolute;
    right: -10px;
    top: 2px;
    @media (max-width: 1024px) {
      right: -29px;
    }
  }
  ${(props) =>
    props.needTopMargin &&
    css`
      margin-top: 18px !important;
      @media (max-width: 1024px) {
        margin-top: 14px !important;
      }
    `}
`;

TreeNodeMenu.propTypes = {
  /** The number of new elements in the node */
  newItems: PropTypes.number,
  /** to display the badge */
  showBadge: PropTypes.bool,
  /** call when click on badge */
  onBadgeClick: PropTypes.func,
};
TreeNodeMenu.defaultProps = { theme: Base };

export default TreeNodeMenu;
